/* eslint-disable react/prop-types */
import React, { useState, useEffect } from 'react';
import { EchartsComp } from './echarts';
import {
  beclareDetail,
  referenceStrategy,
  forecastAndSimulate,
  priceDiffCurve,
  aiAndSimulate,
  userAndSimulate,
} from './helper';
import { useThemeChange } from '@/hooks';

export function DeclareDetailEcharts({ data = [], date = '', unit = 'MW' }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...beclareDetail(data, date, unit) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...beclareDetail(data, date, unit) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} />;
}

export function ReferenceStrategyEcharts({ data = [], date = '' }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...referenceStrategy(data, date) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...referenceStrategy(data, date) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} />;
}

export function ForecastAndSimulateEcharts({ data = [], date = '' }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...forecastAndSimulate(data, date) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...forecastAndSimulate(data, date) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} />;
}

export function PriceDiffCurveEcharts({ data = [], date = '', type }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...priceDiffCurve(data, date, type) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...priceDiffCurve(data, date, type) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} />;
}

export function AIAndSimulate({ data = [], date = '' }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...aiAndSimulate(data, date) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...aiAndSimulate(data, date) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} />;
}

export function UserAndSimulate({ data = [], date = '' }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...userAndSimulate(data, date) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...userAndSimulate(data, date) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} />;
}
